//第一步 翻面控制
function turn(elem){
	var cls=elem.className;// 存放当前点击传进来的className
	// console.log(cls);
	var n=elem.id.split('_')[1];
	 console.log(n);
	//_下划线会把它拆分成一个数组，取到第一项就是传进来id的索引编号  关联按钮
	if(!/photo_center/.test(cls)){//判断当前点击海报有没有photp_center样式，进行一次排序 如果没有直接return
			rsort(n);//排序海报
			getColor();// 改变随机字体颜色
			return;
		}

	if(/photo_front/.test(cls )){//判断当前点击海报有没有photp_front样式,如果有替换为反面
		cls=cls.replace(/photo_front/,'photo_back')
		g("#nav_"+n).className+=" i_back";//判断当前点击海报有没有photp_front样式,如果有把对应的按钮样式加上反面样式
	
	}else{
		cls=cls.replace(/photo_back/,'photo_front')//否则当前点击海报没有photp_back样式,有就要替换为正面
		g("#nav_"+n).className=g("#nav_"+n).className.replace(/\s*i_back\s*/," ");// 如果是反面就把按钮i_back样式去掉

	}
	return elem.className=cls;
		getColor(); //改变随机字体颜色
}


// 第三步 通用函数  获取元素
function g(selector){// 获取传进来的参数
	//截取检测第一个值是不是一个. 是一个点的话就是class元素 否则就是ID元素
	var method=selector.substr(0,1)=="." ?"getElementsByClassName":"getElementById";
	return document[method](selector.substr(1));
	//返回传进来的参数 截取第一个值后边的所有值
}

//第四步  输出所有海报  生成按钮
	var data=data;  // 存储所有数据的数组

	function addPhotos(){
		var template=g("#warp").innerHTML;// 父层
		var html=[]; // 存储数据
		var nav=[];//存放按钮

		for(s in data){// 遍历数据  替换对应的数据
		//	console.log(data[s]);
			var _html=template.replace("{{index}}",s)
								.replace("{{img}}",data[s].img)
								.replace("{{caption}}",data[s].caption)
								.replace("{{desc}}",data[s].desc);
			html.push(_html);// 遍历完数据push到 html变量中
			//有多少个海报就生成多少个按钮  每个控制按钮的id和每个海报的id对应
			nav.push('<span class="i" id="nav_'+s+'" onclick="turn(g(\'#photo_'+s+'\'))">&nbsp;</span>');
		}
		// 用这个元素装所有的数据 以及控制条  将nav数组类型转化为字符串
		html.push('<div class="nav">'+nav.join("")+'</div>');

		g("#warp").innerHTML=html.join("");// 把所有数据回写到warp中

		//随机从所有海报中 随机选取一个
		rsort(random([0,data.length-1]));// 从0到所有海报的数量中间随机选一个 排序海报
	}
	
//第5步 排序海报
function rsort(n){ 
	var _photo= g('.photo');// 用来临时存储 得到所有海报（获得的是个假的数组）
	var photos =[];// 用来存放所有海报的真正数组
	var navs=g(".i"); // 存取所有类名为.i的按钮元素
	// console.log(navs);
	// 循环把所有海报元素里classname中photo_center去掉 photo_center做替换为 空白字符
	//
	for(s=0;s<_photo.length;s++){
		_photo[s].className = _photo[s].className.replace(/\s*photo_center\s*/," ")//photo_center做替换为 空白字符
													.replace(/\s*photo_front\s*/," ")//photo_front正面样式 去掉
													.replace(/\s*photo_back\s*/," ");//photo_back反面样式 去掉
		_photo[s].style["transform"]=_photo[s].style["-webkit-transform"]="rotate(360deg) scale(1.1)";// 所有海报旋转、缩放大小

		_photo[s].style.left=""; //定位样式清空 重新随机排序
		_photo[s].style.top="";
		_photo[s].className+= ' photo_front ';// 初始排序为正面
		// 替换对应的按钮样式
		navs[s].className=navs[s].className.replace(/\s*i_back\s*/," ");// 背面按钮样式
		navs[s].className=navs[s].className.replace(/\s*i_current\s*/," ");// 选中按钮的样式

		photos.push(_photo[s]);// 用来存放所有海报的真正数组
 
	}
	// 根据一个值N 取得第N个海报(#photo_N) 给它添加class photo_center的样式
	var photo_centen = g('#photo_'+n); 
	photo_centen.className+= ' photo_center ';

	// 把 拥有photo_center 样式的这个海报截取出来  这时候它就没什么意义了
	photo_center = photos.splice(n,1)[0]; // 

	// 把除了拥有photo_center 样式，剩余的海报分为左右 两个部分排序
	var photos_left =photos.splice(0,Math.ceil(photos.length/2)); //左分区海报（截取photos的一半）
	var photos_right =photos; //右分区海报

	var ranges =range(); //把随机数范围这个函数 赋给新的变量
		//左分区
		for(var s in photos_left){
			var photo=photos_left[s];
			//设置某一个海报的左分区的随机left、top值 排序位置
			photo.style.left=random(ranges.left.x)+"px";
			photo.style.top=random(ranges.left.y)+"px";
			// 设置旋转角度  缩放大小
			photo.style["transform"]=photo.style["-webkit-transform"]="rotate("+random([-150,150])+"deg) scale(1)";	
		}
		//右分区
		for(var s in photos_right){
			var photo=photos_right[s];
			//设置某一个海报的右分区的随机left、top值 排序位置
			photo.style.left=random(ranges.right.x)+"px";
			photo.style.top=random(ranges.right.y)+"px";
			//设置海报旋转角度随机-150  到150  并放大
			photo.style["transform"]=photo.style["-webkit-transform"]="rotate("+random([-150,150])+"deg)  scale(1)";
		}
		// 控制按钮处理  给选中海报加上按钮选中的样式
		g("#nav_"+n).className+=" i_current";

	}

//第6步 随机生成一个值 支持取值范围 排序海报  这个随机数生成器支持负数
// random( [min,max] )
	function random(range){ 
		var max=Math.max(range[0],range[1]);// 最大值
		// console.log(range[0]);
		var min=Math.min(range[0],range[1]);// 最小值
		var diff=max-min; // 差值
		var number=Math.ceil( (Math.random()*diff+min));//随机数范围选取
		return number;
	}

	// 难点*****************
	// 第7步计算左右分区的随机范围{left:{ x:[min,max],y:[]}, right{}}
	function range(){
		var range={
			left:{x:[],y:[]},
			right:{x:[],y:[]}
		}
		var wrap={ 	//	 获取整个试图元素宽高
			w:g("#warp").clientWidth,
			h:g("#warp").clientHeight
		}
		var photo={//	 获取某一个海报元素宽高
			w:g(".photo")[0].clientWidth,
			h:g(".photo")[0].clientHeight
		}
		range.wrap=wrap;
		range.photo=photo;
		// 计算左分区应该定位的位置x，y轴的值
		// x轴范围：最小值: 0-海报的W/4,  最大值:视图W/2-海报的W/2-海报的W
		range.left.x=[0-photo.w/4,wrap.w/2-photo.w/2-photo.w];
		// Y轴范围：最小值:0-海报的H/4,  最大值：视图H-海报的H/4
		range.left.y=[0-photo.h/4,wrap.h-photo.h/4];
		

		// 计算右分区应该定位的位置x，y轴的值
		// x轴范围：最小值:视图的W/2+海报的W*1.5,  最大值：视图W-海报的W/4
		range.right.x=[wrap.w/2+photo.w*1.5,wrap.w-photo.w/4];
		range.right.y=range.left.y;
		return range;
	}
	
	//第8步字体随机变色  改变正面标题颜色 以及背面描述信息颜色
	function getColor(){
		var  caption = document.querySelectorAll('.caption');
		var  desc = document.querySelectorAll('.desc');
		var  sideback = document.querySelectorAll('.side-back');
		
		// console.log(caption);
		for(var i=0;i<caption.length; i++){
			
			var r=Math.floor(Math.random()*250);// 生成随机颜色
			var g=Math.floor(Math.random()*252);
			var b=Math.floor(Math.random()*255);
			caption[i].style.color='rgb('+r+','+g+','+b+')';
			desc[i].style.color='rgb('+b+','+r+','+g+')';
			sideback[i].style.backgroundColor='rgb('+r+','+g+','+b+')';
		}
	}

	// 页面加载完毕以后渲染数据 添加随机颜色
	window.onload=function(){
		addPhotos();
		getColor();
	}


	